<?php
/***
 * Created on July 2, 2010
 * parabolic-vision
 * Mark Watabe
 * 
 * This project is an ongoing investigation based on work done in a very small 3 day workshop in June, 2010 at MIT. Run by Annette Kim, director of SLAB @ MIT (The Sidewalk Lab within the Department of Urban studies & Planning at MIT), the goal of the work was to find new ways to map and think about the complex and dynamic role of sidewalks in Ho Chih Minh city, Vietnam. One investigation was to write a script that lifted all of the sidewalks as a function of distance from a viewer and render this view in an "unwrapped" cylindrical projection. This view creates a map that combines a perspective (for "here") with a birds eye map (for "there"). The goal of this project is to continue exploring the graphic qualities of this type of mapping, and to explore adding real time layers that take full advantage of creating a view that gives a much stronger indication of "here/now" and "there/then".
 * 
 * 
 ***/
//echo


?>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

		<META name="description" content = "The parabolic vision project">
		<META name = "keywords" content = "mapping, projective mapping, augemented reality, AR, urbanism">

		<title>parabolic vision</title>
  <link rel="stylesheet" href="style.css" type ="text/css"/>
  <script type="text/javascript" src="js/map.js"></script>
  <script type="text/javascript" src="js/math.js"></script>
  <script type="text/javascript" src="js/interface.js"></script>
  <script type="text/javascript" src="js/mootools_core.js"></script>
   

  
  <script type="text/javascript">

			  		
  		var canvas_proj_context;
  		var mouseCoord = [0,0];
  		var projCoord = [0,0];
  		var orthoCoord = [0,0];
  		var mouseStatus = 0;
  		var PROJ_MOUSE = 1;
  		var ORTHO_MOUSE = 2;
  		var NO_MOUSE = 0;
  		var orthoWorldBounds = [0,0,0,0];
		//var orthoFrameBounds = ??;
		var PROJ_CANVAS_HEIGHT = 250;
		var PROJ_CANVAS_WIDTH = 1400;
		var ORTHO_CANVAS_DIAMETER = 200;
		var VISION_ANGLE = 60;
		var ANGLE_ORIGIN = 0;
		//0-60, 320-20(380)
		//if it is 320, subtract that amount...
		
		///var projRect = [0,0,1000,200];
		var orthoRect = [0,230,200,200];
		
		
	
function updateProjMouseCoord()
{
	//if(mouseStatus == PROJ_MOUSE)
	//{
		drawProjCursor( mouseCoord )
	//}	
}
  
function openNewWindow(link) 
{
popupWin = window.open(link,
"open_window","menubar, toolbar, location, directories, status, scrollbars, resizable, dependent, width=640, height=480, left=0, top=0")
 } 
  
  
//LOADER  
window.addEvent("domready", function(){


	
	//the mousemove listener for the projective canvas.
	$(document.body).addEvent("mousemove",function(e) 
	{ 
		mouseCoord[0] = e.page.x;
		mouseCoord[1] = e.page.y;
  		updateProjMouseCoord();
  	}); 
  	
  	//the mouse down listener for the projective canvas
  	$(document.body).addEvent("mousedown",function(e) 
	{ 		
		for(i = 0; i < allImages.length; i++)
		{
			var thisImg = allImages[i];
			var thisRect = thisImg[0];
			if(
			(mouseCoord[0] >= thisRect[0] ) && (mouseCoord[1] >= thisRect[1] ) &&
			(mouseCoord[0] <= thisRect[0] + thisRect[2] ) && (mouseCoord[1] <= thisRect[1] + thisRect[3] ) )
			{			
				openNewWindow("http://www.cnn.com");// savedDrawnPoints[i][2]);				
			}
		}
  	});
  	
  	$("canvasProjDiv").set("html","<canvas id='canvasProj' width=" + 
  		  		PROJ_CANVAS_WIDTH +" height=" + PROJ_CANVAS_HEIGHT +"></canvas>");
  	$("canvasProjDrawDiv").set("html","<canvas id='canvasProjDraw' width=" + 
  		  		PROJ_CANVAS_WIDTH +" height=" + PROJ_CANVAS_HEIGHT +"></canvas>");
  //	$("canvasOrthoDiv").set("html","<canvas id='canvasOrtho' width=" + 
  	//		ORTHO_CANVAS_DIAMETER +" height=" + ORTHO_CANVAS_DIAMETER +"></canvas>");

  	//<canvas id="canvasOrtho" width="200" height="200"></canvas>
  	//<canvas id="canvasProjDraw" width={PROJ_CANVAS_WIDTH} height={PROJ_CANVAS_HEIGHT}></canvas>

  	//  	.set("html", "back");
  	//
  	//sets all the position, needs to be changed
	//$("canvasProjDiv").setStyle("top", projRect[1]);
 	//$("canvasProjDiv").setStyle("left",projRect[0]);
 	//$("canvasProjDrawDiv").setStyle("top", projRect[1]);
 	//$("canvasProjDrawDiv").setStyle("left",projRect[0]);
 	$("canvasOrthoDiv").setStyle("top",orthoRect[1]);
 	$("canvasOrthoDrawDiv").setStyle("top",orthoRect[1]);

	//this is my way of figuring out if things are working. perhaps i should figure out a better way?
 	$("tracer").setStyle("top",860);
 	$("tracer2").setStyle("top",900);
 	$("tracer3").setStyle("top",440);	
 	//needs to be renamed
 	$("rotunduhControlPanel").setStyle("left",420);
 	$("rotunduhControlPanel").setStyle("top",220);
 	 		
 	//listens for mouseovers to determine if the mouse is on the projective map or the ortho map		
	$("canvasProj").addEvents({
		mouseenter: function(e){
			mouseStatus = PROJ_MOUSE;
			document.getElementById("tracer").innerHTML = "projective mouse " + e.page.x ;
		},
		mouseleave: function(){
			mouseStatus = NO_MOUSE;
			document.getElementById("tracer").innerHTML = "no mouse";
		}
	});
	$("canvasOrtho").addEvents({
		mouseenter: function(){
			mouseStatus = ORTHO_MOUSE;
			document.getElementById("tracer").innerHTML = "ortho mouse";
		},
		mouseleave: function(){
			mouseStatus = NO_MOUSE;
			// Morphes back to the original style
			document.getElementById("tracer").innerHTML = "no mouse";
		}
	});
	
doXML();
		});
		
		
		
	

	</script>
   
 </head>
 <body  >
   
	
	<div id = "canvasProjDiv"></div>
	<div id = "canvasProjDrawDiv"></div>
	<div id = "canvasBowlDiv"></div>	
	<div id = "canvasOrthoDiv"><canvas id="canvasOrtho" width="200" height="200"></canvas></div>
	<div id = "canvasOrthoDrawDiv"><canvas id="canvasOrthoDraw" width="200" height="200"></canvas></div>

	

   <div id="tracer" width="200" height="200">
   	...
   </div>
    <div id="tracer2" width="200" height="200">
   	...
   </div>
   <div id="tracer3" width="200" height="200">
   <p>output</p>
   </div>
   

   <div id="holderId" style=" position:relative; width:500px; height:300px"></div>
 
 </body>
</html>;




